<!--
  ES5 var 的缺陷
  ------------

  一下 js 都是 ES5 的写法
 -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
  </div>

  <script>

    // var 在：
    // 1、if、for 都没有作用域
    // 2、function 有作用域

    // ES5之前因为 if 和 for都没有块级作用域的概念，所以在很多时候，
    // 我们都必须借助于function的作用域来解决外面变量的问题。


    // ES6中，加入了`let`，let它是有if和for的块级作用域。
//-------------------------------------------------------------------

    // 1. 变量的作用域：变量在什么范围内是可用。
    // {
    //   var name = 'why'
    //   console.log(name)
    // }
    // console.log(name)
    // so. var 在 块级，没有作用域的限制

    // 2.没有块级作用域引起的问题： if块级
    // var func;
    // if(true) {
    //   var name = 'why';

    //   func = function() {
    //     console.log(name)
    //   }
    //   // func();
    // }
    // func();
    // console.log(name)
    // so. var 在 if 中，也没有作用域的限制

    // 3.没有块级作用域引起的问题： for块级
    // var btns = document.getElementsByTagName('button');
    // for(var i = 0; i<btns.length; i++) {
    //   btns[i].addEventListener('click', function(){
    //     console.log('第'+i+'个按钮被点击')
    //   })
    // }

    //ES5 解决上面的问题： 闭包
    //为什么闭包可以解决问题，闭包是函数，函数是一个作用域
    var btns = document.getElementsByTagName('button');
    for(var i = 0; i<btns.length; i++) {
      // // ---1----
      (function(i) {
        btns[i].addEventListener('click', function(){
          console.log('第'+i+'个按钮被点击')
        })
      })(i)

      // // ---2----
      // (function(index) {
      //   btns[index].addEventListener('click', function(){
      //     console.log('第'+index+'个按钮被点击')
      //   })
      // })(i)

      //闭包形式
      // (function(变量b)=>{
      //     ... 变量b ...
      // })(变量a)
    }

    // 那么来个简单的，函数作用域
    // var nameA = 'srx';
    // function abc(nameA) {
    //   console.log(nameA)
    // }
    // nameA = 'kobe';
    // abc('aaa')



    // ES6的 `let` 使用 -- 就有作用域的限制
    // var btns = document.getElementsByTagName('button');
    // for(let i = 0; i<btns.length; i++) {
    //   btns[i].addEventListener('click', function(){
    //     console.log('第'+i+'个按钮被点击')
    //   })
    // }


  </script>
</body>
</html>